<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎访问物联网小店</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index_ok.css">
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
  <script src="./bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
  <div class="container-fluid" id="top">
    <div class="container">
      <ul class="list-inline">
        <li><a href="#top01" class="top_href">用户注册</a></li>
        <li><a href="#top02" class="top_href">用户登录</a></li>
        <li><a href="#top03" class="top_href">后台入口</a></li>
      </ul>
    </div>
  </div>

  <div class="container-fluid" id="logo">
    <div class="row">
      <div class="col-sm-5 col-md-3" id="web_logo"></div>
      <div class="col-sm-7 col-md-9 hidden-xs">
        <div id="logo_content">
          <div id="big_search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="输入搜索内容">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">开始搜索</button>
              </span>
            </div><!-- /input-group -->
          </div>
          <div id="big_cart">
            <span>我的购物车 <span class="badge">4</span></span>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>

  <nav class="navbar navbar-default" id="nav">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand hidden-xs" href="#">分类</a>
      </div>

      <div class="visible-xs">
        <div id="m_search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="输入内容">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">搜索</button>
            </span>
          </div><!-- /input-group -->
        </div>
        <div id="m_cart">
          <span><a href="#cart">购物车</a> <span class="badge">4</span></span>
        </div>
        <div class="clearfix"></div>
      </div>
  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">网站首页 <span class="sr-only">(current)</span></a></li>
          <li><a href="#n01">手机精选</a></li>
          <li><a href="#n02">主要书籍</a></li>
          <li><a href="#n03">电脑周边</a></li>
          <li><a href="#n04">教学资料</a></li>
          <li><a href="#n05">教学课件</a></li>
          <li><a href="#n05">二手物品</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="container-fluid product" id="zxzk">
    <h3><span>最新折扣</span></h3>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="zxzk_c">
          <img src="d01.jpg" class="img-responsive" alt="">
          <div class="zxzk_intro">
            <p>
              <span class="glyphicon glyphicon-calendar"></span>
              <span>2023/04/19</span>
              <span>￥<del>1998</del></span>
              <span>￥188</span>
            </p>
            <h4>
              铁三角耳机M100精装版
            </h4>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="zxzk_c">
          <img src="d04.jpg" class="img-responsive" alt="">
          <div class="zxzk_intro">
            <p>
              <span class="glyphicon glyphicon-calendar"></span>
              <span>2023/04/19</span>
              <span>￥<del>1998</del></span>
              <span>￥188</span>
            </p>
            <h4>
              铁三角耳机M100精装版
            </h4>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="zxzk_c">
          <img src="d02.jpg" class="img-responsive" alt="">
          <div class="zxzk_intro">
            <p>
              <span class="glyphicon glyphicon-calendar"></span>
              <span>2023/04/19</span>
              <span>￥<del>1998</del></span>
              <span>￥188</span>
            </p>
            <h4>
              铁三角耳机M100精装版
            </h4>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="zxzk_c">
          <img src="d03.jpg" class="img-responsive" alt="">
          <div class="zxzk_intro">
            <p>
              <span class="glyphicon glyphicon-calendar"></span>
              <span>2023/04/19</span>
              <span>￥<del>1998</del></span>
              <span>￥188</span>
            </p>
            <h4>
              铁三角耳机M100精装版
            </h4>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid product" id="rxcp">
    <h3><span>热销产品</span></h3>
    <div class="container" id="rxcp_choice">
      <button class="btn btn-warning">最新产品</button>
      <button class="btn btn-warning">卖得最好</button>
      <button class="btn btn-warning">特色商品</button>
    </div>
    <div class="row">
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>苹果摄像头</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-half-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥988</div>
          </div>
          <img src="./t01.jpg" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>华为智能手表</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥368</div>
          </div>
          <img src="./t06.jpg" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>森海塞尔耳机</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥988</div>
          </div>
          <img src="./t02.jpg" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>苹果手机</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-half-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥4988</div>
          </div>
          <img src="./t03.jpg" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>苹果手机摄像头</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-half-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥376</div>
          </div>
          <img src="./t04.jpg" class="img-responsive" alt="">
        </div>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-6">
        <div class="rxcp">
          <div class="rxcp_top">
            <div>佳能镜头</div>
            <div>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-half-o m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </div>
            <div>￥988</div>
          </div>
          <img src="./t05.jpg" class="img-responsive" alt="">
        </div>
      </div>
    </div>
  </div>
  

  <div class="container-fluid product" id="cpfl">
    <h3><span>产品分类</span></h3>

    <div class="row">
      <div class="col-md-3">
        <div class="cpfl01">
          <img src="c01.jpg" class="img-responsive" alt="">
          <h4>家用电器</h4>
        </div>
      </div>
      <div class="col-md-3">
        <div class="cpfl01">
          <img src="c02.jpg" class="img-responsive" alt="">
          <h4>家用电器</h4>
        </div>
      </div>
      <div class="col-md-3">
        <div class="cpfl01">
          <img src="c03.jpg" class="img-responsive" alt="">
          <h4>家用电器</h4>
        </div>
      </div>
      <div class="col-md-3">
        <div class="cpfl01">
          <img src="c04.jpg" class="img-responsive" alt="">
          <h4>家用电器</h4>
        </div>
      </div>
    </div>

    <div class="row tbtj">
      <div class="col-md-4">
        <img src="ca01.jpg" class="img-responsive" alt="">
      </div>
      <div class="col-md-4">
        <img src="ca02.jpg" class="img-responsive" alt="">
      </div>
      <div class="col-md-4">
        <img src="ca03.jpg" class="img-responsive" alt="">
      </div>
    </div>
  </div>

  <div class="row zysp">
    <div class="col-md-4">
      <div class="zysp_g">
        <h3>智能手机</h3>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p1.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p3.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p2.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="zysp_g">
        <h3>家用电器</h3>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p4.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p5.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p6.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="zysp_g">
        <h3>数码产品</h3>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p7.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p3.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="zysp_sp">
          <div class="zysp_img">
            <img src="p2.jpg" class="img-responsive" alt="">
          </div>
          <div class="zysp_intro">
            <p>华为智能手表</p>
            <p>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star m_star" aria-hidden="true"></i>
              <i class="fa fa-star-o m_star" aria-hidden="true"></i>
            </p>
            <p>￥188</p>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom container-fluid">
    <p>地址:云南省昭通市昭阳区国学路</p>
    <p>邮政编码:657000</p>
    <p>技术支持:ykonghao@gmail.com</p>
    <p>昭通学院版权所有 &copy; 2023-2024 滇ICP备14007228号-1</p>
  </div>
</body>
</html>